8c:I[903690,["/chat-static/_next/static/chunks/0e2tb6ztxas0b.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1f7u6rgo4cul0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/05pq8s6zv_wn1.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/43vadfihbvtl1.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1gycrwvtm60qn.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0ke63s91gpvy3.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1ccgxhg3rjfjo.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/01gmrqojqtlsu.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2qjug_t8m8oho.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0qdgtnqed6832.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1lmne7b3yag00.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/330f8n_uwn2ft.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/160o23x6urtdh.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1qov2bia_ns-o.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/10xq309qhj3gr.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/04t51g7mb5zjz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2xm81q215cv7s.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0j_lsstp2mbsx.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0aas_nxnpj24g.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/42h7tmr-x85i0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1pycny3zv2irk.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2nrg64o7044ea.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2wb66rh9_-phb.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2934g55qd7tuc.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/111x4t_autsmc.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/18ivfh5uja4t0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2r3_xwoqt-j-8.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu"],"ExplicitChatIdProvider"] 8d:I[838238,["/chat-static/_next/static/chunks/0e2tb6ztxas0b.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1f7u6rgo4cul0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/05pq8s6zv_wn1.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/43vadfihbvtl1.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1gycrwvtm60qn.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0ke63s91gpvy3.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1ccgxhg3rjfjo.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/01gmrqojqtlsu.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2qjug_t8m8oho.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0qdgtnqed6832.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1lmne7b3yag00.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/330f8n_uwn2ft.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/160o23x6urtdh.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1qov2bia_ns-o.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/10xq309qhj3gr.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/04t51g7mb5zjz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2xm81q215cv7s.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0j_lsstp2mbsx.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/0aas_nxnpj24g.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/42h7tmr-x85i0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/1pycny3zv2irk.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2nrg64o7044ea.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2wb66rh9_-phb.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2934g55qd7tuc.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/111x4t_autsmc.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/18ivfh5uja4t0.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu","/chat-static/_next/static/chunks/2r3_xwoqt-j-8.js?dpl=dpl_B211KWrFNAPr3MZgvyq4f284nvQu"],"SWRDataProvider"] 8e:T8932,[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { DynamicIsland } from "@/components/dynamic-island" import { WavyBackground } from "@/components/wavy-background" import { Clock } from "@/components/clock" export default function Home() { const [islandMode, setIslandMode] = useState< "hidden" | "compact" | "call" | "music" | "music-expanded" | "notification" | "charging" >("compact") return (

Dynamic Island Controls

Click on the music player to expand it. Use the volume icon to show volume controls.

) } [V0_FILE]typescriptreact:file="components/wavy-background.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" export function WavyBackground() { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Set canvas dimensions const setCanvasDimensions = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight } setCanvasDimensions() window.addEventListener("resize", setCanvasDimensions) // Wave parameters const waves = [ { amplitude: 25, frequency: 0.02, speed: 0.01, color: "rgba(59, 130, 246, 0.2)", phase: 0 }, { amplitude: 15, frequency: 0.03, speed: 0.015, color: "rgba(99, 102, 241, 0.15)", phase: 2 }, { amplitude: 10, frequency: 0.04, speed: 0.02, color: "rgba(139, 92, 246, 0.1)", phase: 4 }, ] // Noise texture const noiseCanvas = document.createElement("canvas") const noiseCtx = noiseCanvas.getContext("2d") if (!noiseCtx) return noiseCanvas.width = 256 noiseCanvas.height = 256 // Generate noise texture const generateNoise = () => { const imageData = noiseCtx.createImageData(noiseCanvas.width, noiseCanvas.height) const data = imageData.data for (let i = 0; i < data.length; i += 4) { const value = Math.floor(Math.random() * 100) data[i] = value data[i + 1] = value data[i + 2] = value data[i + 3] = 10 // Low alpha for subtle effect } noiseCtx.putImageData(imageData, 0, 0) } generateNoise() // Animation loop const animate = () => { ctx.clearRect(0, 0, canvas.width, canvas.height) // Draw gradient background const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height) gradient.addColorStop(0, "#f0f9ff") gradient.addColorStop(1, "#e0f2fe") ctx.fillStyle = gradient ctx.fillRect(0, 0, canvas.width, canvas.height) // Apply noise texture ctx.globalAlpha = 0.05 ctx.drawImage(noiseCanvas, 0, 0, canvas.width, canvas.height) ctx.globalAlpha = 1 // Draw waves waves.forEach((wave) => { wave.phase += wave.speed ctx.beginPath() ctx.moveTo(0, canvas.height / 2) for (let x = 0; x < canvas.width; x++) { const y = Math.sin(x * wave.frequency + wave.phase) * wave.amplitude + canvas.height / 2 ctx.lineTo(x, y) } ctx.lineTo(canvas.width, canvas.height) ctx.lineTo(0, canvas.height) ctx.closePath() ctx.fillStyle = wave.color ctx.fill() }) requestAnimationFrame(animate) } animate() return () => { window.removeEventListener("resize", setCanvasDimensions) } }, []) return

About

Tags

Share

About

Tags

Share

More from papingothegamer

More Templates Like This